<template>
  <div class="text-left padding-lr">
    <el-card>
      <el-form enctype="multipart/form-data">
        <el-upload
          action="#"
          list-type="picture-card"
          :http-request="uploadFn"
          :on-preview="handlePictureCardPreview"
          accept=".jpg,.jpeg,.png,.JPG,.JPEG"
          :on-remove="handleRemove"
          :multiple="false"
          :limit="1"
          :on-success="handleSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form>
    </el-card>
  </div>
</template>

<script>
//引入 ajax 工具
import { ajax } from "@/store/yg/common/utils";
//翻译工具
import { m } from "@/store/yg/common/local";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import { untransform } from "@/store/yg/common/uri";

export default {
  props: ["row", "data"],
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  //生命周期函数  页面渲染完成
  mounted() {
    //点编辑请求接口
    if (this.$store.state.edit.id) {
    }
  },
  methods: {
    uploadFn(file) {
      if (!this.beforeAvatarUpload(file.file)) return;
      // this.formData.files.push(file.file);
      // this.formData.id=this.$store.state.edit.id;
      const form = new FormData();
      form.append("items[]", file.file);
      // form.append("id", this.$store.state.edit.id);
      const action =
        constant.API_SERVER +
        "/api/consume/upload?uri=" +
        untransform(this.$route.params.uri) +
        "&f=uploadbarcode&type=main&id=" +
        this.$store.state.edit.id; //&id=" + this.$store.state.edit.id;
      axios({
        method: "post",
        url: action,
        data: form
      })
        .then(response => {
          console.log("有返回吗？",response)
          if (response.data.code === 200) {
            this.$notify.success({
              title: "正确",
              message: "上传成功!"
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: "上传失败!" + response.data.message
            });
          }
        })
        .catch(error => {
          console.log(error);
          this.$notify.error({
            title: "错误",
            message: "上传失败!"
          });
        });
      // this.uploadbarcode(this.form);
    },
    handlePreview() {},

    beforeAvatarUpload(file) {
      console.log("file>>>", file);
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 5;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      // if (!isLt2M) {
      //   this.$message.error('上传图片大小不能超过 5MB!')
      //   return false
      // }
      return true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess() {},

    // async uploadbarcode(formData) {
    //   console.log("000",formData)
    //   console.log("111",constant.API_SERVER)
    //   console.log("222",this.$route.params.uri)
    //   console.log("3333",this.$store.state.edit.id)
    //
    // }
  }
};
</script>

<style scoped>
/deep/ .el-select,
.el-input-number,
.el-date-editor {
  width: 100%;
}
</style>
